import React, { useCallback } from "react";
import PropTypes from "prop-types";
import Modal from "antd/lib/modal";
import { wrap as wrapDialog, DialogPropType } from "@/components/DialogWrapper";
import { CloseCircleTwoTone } from '@ant-design/icons';

import "./dialog.less";

function ExpandedUrlDialog({ dialog, width, height, title, url, refresh }) {
  const showPortal = window.location.search.includes("show_portal") && localStorage.getItem('colorstyle_mode');
  // const iframeRef = useRef(null);

  // const loadIframe = url => {
  //   setTimeout(() => {     
  //     if (iframeRef && iframeRef.current) {
  //       iframeRef.current.src = url;
  //     }
  //   },1000);
  // };

  const handleClose = useCallback(() => {
    dialog.close(refresh);
    if (refresh) {window.location.reload();} 
  }, [dialog, refresh]);

  return (
    <Modal
      {...dialog.props}
      width={width}
      title={title || " "}
      footer={null}       //{<Button onClick={handleClose}>关闭</Button>}
      closeIcon={<CloseCircleTwoTone style={{fontSize:25}}/>}
      wrapClassName={'dialog'}
      style = {showPortal ? {"--style-back": localStorage.getItem('colorstyle_dialogback')} : {"--style-back": "#666666"}}
      afterClose = {handleClose}
      bodyStyle={showPortal ? {background: "#00000000"} : null}
    >
      {/* <DynamicComponent name="UrlDialogContent" openPageUrl={loadIframe(url)}> */}
        <iframe 
        // ref={iframeRef}
        title="pop_redash" 
        sandbox="allow-same-origin allow-top-navigation allow-forms allow-scripts allow-popups"
        frameBorder="0"
        width="100%"
        height={height}
        scrolling="auto"
        src={url}
        />
      {/* </DynamicComponent> */}
    </Modal>
  );
}

ExpandedUrlDialog.propTypes = {
  dialog: DialogPropType.isRequired,
  width: PropTypes.string.isRequired,
  height: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  url: PropTypes.string.isRequired,
  refresh: PropTypes.bool.isRequired,
};

export default wrapDialog(ExpandedUrlDialog);
